<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小图换大图</title>
		<style>
			*{
				padding: 0;
				margin: 0;
				list-style-type: none;
			}
			
			.web{
				width: 300px;
				height: 400px;
				overflow-y: hidden;
				border: 1px solid #ccc;
				margin: 10px;
			}
			
			.big-pic{
				width: 300px;
			}
			
			.big-pic img{
				width: 100%;
			}
			
			.small-pic{
				width: 300px;
				font-size: 0;
				border-top: 1px solid #CCCCCC;
				margin-bottom: 2px;
			}
			
			.small-pic li {
				display: inline-block;
				width: 33%;
				border-left: 1px solid #CCCCCC;
				box-sizing: border-box;
				padding: 0 2px;
				overflow: hidden;
			}
			
			.small-pic li:first-of-type{
				border: none;
			}
			
			.small-pic li img{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<div class="big-pic">
				<img src="img/changBigPic/pic_big01.jpg" alt="" />
			</div>
			<ul class="small-pic">
				<li>
					<img src="img/changBigPic/pic_s1.jpg" alt="" />
				</li>
				<li>
					<img src="img/changBigPic/pic_s2.jpg" alt="" />
				</li>
				<li>
					<img src="img/changBigPic/pic_s3.jpg" alt="" />
				</li>
			</ul>
		</div>
		<script>
			var big_pic = document.querySelector('.big-pic');
			var small_pics = document.querySelector('.small-pic').getElementsByTagName('li');
			for ( let i = 0; i < small_pics.length; i++ ){				
				small_pics[i].addEventListener('click',function(){
					big_pic.firstElementChild.src = 'img/changBigPic/pic_big0' + (i+1) + '.jpg';
				});
		}
		</script>
	</body>
</html>
